<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px blue solid;
			}
		</style>
	</head>
	<body>
		<canvas id="c" width="600" height="850"></canvas>
		<script type="text/javascript">
			
			var c = document.querySelector("canvas")
			var ctx = c.getContext("2d")
			ctx.strokeStyle = "black"
			ctx.fillStyle = "black"
			
			//绘制圆形：ctr.arc(x,y,r,begin,end)
			//         圆心坐标 x，y,半径，开始角度，结束角度
			//ctx.strokRect(x,y,w,h)
			//beginPath相当于moveTo,作用是把圆与上一个点分开
			//closePath将圆的首位连接
			ctx.arc(300,725,25,0,Math.PI*2)
			ctx.fill()
			ctx.beginPath()
			ctx.fillRect(100,200,400,475)
			ctx.fillRect(250,100,100,50)
			
			ctx.beginPath()
			ctx.arc(250,125,24,0,Math.PI*2)
			ctx.arc(352,125,24,0,Math.PI*2)
			ctx.fill()
			ctx.stroke()
			
			ctx.beginPath()
			ctx.arc(100,110,50,Math.PI*1.5,Math.PI*1,true)
			ctx.stroke()
			ctx.beginPath()
			ctx.arc(500,110,50,0,Math.PI*1.5,true)
			ctx.stroke()
			ctx.beginPath()
			ctx.arc(100,740,50,Math.PI*1,Math.PI*0.5,true)
			ctx.stroke()
			ctx.beginPath()
			ctx.arc(500,740,50,Math.PI*0,Math.PI*0.5,false)
			ctx.stroke()
			
			ctx.moveTo(50,110)
			ctx.lineTo(50,740)
			ctx.moveTo(550,110)
			ctx.lineTo(550,740)
			ctx.moveTo(100,60)
			ctx.lineTo(500,60)
			ctx.moveTo(100,790)
			ctx.lineTo(500,790)
			ctx.stroke()
		</script>
	</body>
</html>
